<template>
  <div class="flight-search-page">
    <h1>机票预订</h1>

    <FlightSearch
      title="航班搜索"
      :auto-search="false"
      @search="handleSearch"
      @loading-change="handleLoadingChange"
    />

    <FlightSearchResult
        v-if="searchResults.length > 0"
        :flights="searchResults"
        title="搜索结果"
        :loading="loading"
        :show-details="true"
        @book-flight="handleBookFlight"
      />

      <FlightSearchResult
        v-if="showPopularFlights && searchResults.length === 0"
        :flights="popularFlights"
        title="热门航线"
        :loading="false"
        :show-details="false"
        empty-message="暂无热门航线"
        @book-flight="handleBookFlight"
      />

      <Pagination
        v-if="showPopularFlights && searchResults.length === 0 && popularPagination.totalPages > 1"
        :current-page="popularPagination.currentPage"
        :total-pages="popularPagination.totalPages"
        :total-elements="popularPagination.totalElements"
        @page-change="handlePopularPageChange"
      />
  </div>
</template>

<script>
import api from '../api'
import FlightSearchResult from '../components/FlightSearchResult.vue'
import FlightSearch from '../components/FlightSearch.vue'
import Pagination from '../components/Pagination.vue'

export default {
  name: 'FlightSearchView',
  components: {
    FlightSearchResult,
    FlightSearch,
    Pagination
  },
  data() {
    return {
      searchResults: [],
      popularFlights: [],
      loading: false,
      showPopularFlights: true,
      popularPagination: {
        currentPage: 0,
        totalPages: 0,
        totalElements: 0,
        size: 10
      }
    }
  },
  async mounted() {
    await this.loadPopularFlights()
  },
  methods: {
    handleSearch(searchData) {
      this.searchResults = searchData.results
      if (searchData.results.length > 0) {
        this.showPopularFlights = false
      } else {
        this.showPopularFlights = true
      }
    },

    handleLoadingChange(loading) {
      this.loading = loading
    },

    async loadPopularFlights(page = 0) {
      try {
        const response = await api.get('/flights/popular', {
          params: {
            page: page,
            size: this.popularPagination.size
          }
        })
        this.popularFlights = response.data.content
        this.popularPagination.currentPage = response.data.number
        this.popularPagination.totalPages = response.data.totalPages
        this.popularPagination.totalElements = response.data.totalElements
      } catch (error) {
        console.error('获取热门航线失败:', error)
      }
    },

    handleBookFlight(flight) {
      alert(`预订航班 ${flight.flightNumber} - ${flight.departureCity} → ${flight.arrivalCity}`)
    },

    handlePopularPageChange(page) {
      this.loadPopularFlights(page)
    }
  }
}
</script>

<style scoped>
.flight-search-page {
  max-width: 1200px;
  margin: 0 auto;
}

.flight-search-page h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #333;
}

</style>